<!--玩家组件-->
<template>
  <div>
    <div>
      <div>
<!--        <img :style="isLandlord?'width:4vw;width: 5vw;\n'+-->
<!--'    margin-top: -25px;\n'+-->
<!--'    margin-left: -32px;':'width:10vw'" class="hat" :src="isLandlord?'/landlord/landlordHat.png':'/landlord/farmerHat.png'">-->
      </div>
      <div>
        <img class="logo" :src="isLandlord?landlordImg:farmerImg"></img>
      </div>
    </div>
    <div :class="isLandlord?'landlord':'farmer'">
      <span>{{player.name}}</span>
      <span >{{isLandlord?'地主':'农民'}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "Player",
  props:{
    isLandlord:{default:false},
    player:{
      require:true
    }
  },
  data(){
    return{
      landlordImg: require("@/assets/landlord.webp"),
      farmerImg: require("@/assets/farmer.webp"),
    }
  }
}
</script>

<style scoped>
.landlord{
  background: #d79303;
  font-size: 15px;
  border: #fff solid 1px;
  border-radius: 10px;
  padding: 5px;
  margin-left: 5px;
}
.farmer{
  background: #69eb29;
  font-size: 15px;
  border: #fff solid 1px;
  border-radius: 10px;
  padding: 5px;
  margin-left: 5px;
}
.logo{
  border-radius: 50px;
  object-fit: cover;
  width: 50px;
  height: 50px;
  border: #b45206 solid 6px;
  display: inline-block;
}
.hat{
  width: 10vw;
  position: absolute;
  margin-top: -40px;
  margin-left: -60px;
}
</style>
